<template>
  <div class="map-page">
    <div class="header">
      <h2>腾讯地图展示</h2>
      <div class="controls">
        <button @click="centerToBeijing">定位到北京</button>
        <button @click="centerToShanghai">定位到上海</button>
        <button @click="resetView">重置视角</button>
      </div>
    </div>
    <!-- 地图容器 -->
    <div id="container"></div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'

// 声明全局变量
declare global {
  interface Window {
    TMap: any
  }
}

let map: any = null

// 组件挂载时初始化地图
onMounted(() => {
  // 确保腾讯地图API已加载
  const checkTMap = setInterval(() => {
    if (typeof window.TMap !== 'undefined') {
      clearInterval(checkTMap)
      initMap()
    }
  }, 100)
})

//地图初始化函数
function initMap() {
  try {
    //定义地图中心点坐标（北京）
    var center = new window.TMap.LatLng(39.984120, 116.307484)
    //定义map变量，调用 TMap.Map() 构造函数创建地图
    map = new window.TMap.Map(document.getElementById('container'), {
      center: center,     //设置地图中心点坐标
      zoom: 17.2,         //设置地图缩放级别
      pitch: 43.5,        //设置俯仰角
      rotation: 45        //设置地图旋转角度
    })
    
    console.log('腾讯地图初始化成功')
  } catch (error) {
    console.error('腾讯地图初始化失败:', error)
  }
}

// 定位到北京
function centerToBeijing() {
  if (map) {
    var center = new window.TMap.LatLng(39.984120, 116.307484)
    map.setCenter(center)
    map.setZoom(17.2)
  }
}

// 定位到上海
function centerToShanghai() {
  if (map) {
    var center = new window.TMap.LatLng(31.230416, 121.473701)
    map.setCenter(center)
    map.setZoom(17.2)
  }
}

// 重置视角
function resetView() {
  if (map) {
    map.setZoom(17.2)
    map.setPitch(43.5)
    map.setRotation(45)
  }
}
</script>

<style scoped lang="less">
.map-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100%;
}

.header {
  padding: 10px;
  background: #f5f5f5;
  border-bottom: 1px solid #ddd;
}

.header h2 {
  margin: 0 0 10px 0;
  color: #333;
}

.controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.controls button {
  padding: 8px 16px;
  background: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.controls button:hover {
  background: #40a9ff;
}

#container {
  flex: 1;
  width: 100%;
}

@media (max-width: 768px) {
  .controls {
    flex-direction: column;
  }
}
</style>